<template>
    <div>
        <h2>分类添加</h2>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item  label="分类名：" prop="aritypecontent">
                <el-input v-model="ruleForm.aritypecontent"></el-input>
            </el-form-item>
            <el-form-item>
            <el-button style="margin-top: 12px;" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                ruleForm: {
                    aritypecontent:'',
                },
                rules:{
                    aritypecontent: [
                        { required: true, message: '请输入分类', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                }
            }
        },
        methods:{
            submitForm(formName) {
                console.log(formName);
                const _this = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post("http://localhost:8181/article/addtype",this.ruleForm).then(function (resp) {
                            if (resp.data.msg == 'success'){
                                _this.$message({
                                    message: '添加成功！',
                                    type: 'success'
                                });
                            }else {
                                _this.$message("添加失败");
                            }

                        });

                    } else {

                        return false;
                    }
                });
        },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
    }

    }
</script>

<style scoped>

</style>